<template>
  <div class="radio" :class="{'radio-active':isChecked,'radio-disabled': isDisabled}" @click="handleClick">
    {{label}}
  </div>
</template>
<script>
export default {
  name: 'SkuRadio',
  data () {
    return {
      isChecked: false,
      isDisabled: false
    };
  },
  props: {
    value: {
      type: Object
    },
    index: {
      type: Number
    },
    pid: {
      type: Number
    },
    label: {
      type: String
    }
  },
  mounted () {
    this.disabled = this.value.spec_stock === 0;
  },
  methods: {
    // 点击
    handleClick () {
      if (this.isDisabled || this.isChecked) {
        return;
      }
      this.$parent.$emit('radioChange', this.$props);
    },
    // 初始化
    checkIsActive (value, isChange) {
      this.isChecked = this.value.id === value;
      console.log(value);
      // if (isChange) {
      //   this.$parent.$emit('change', this.$props);
      // }
    }
  }
};
</script>
<style lang="less" scoped>
.radio {
  background-color: #eee;
  border: 1px solid #eee; /*no*/
  padding: 0 22px;
  color: #353535;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 60px;
  border-radius: 60px;
}
.radio.radio-active {
  border: 1px solid #ff0034; /*no*/
  color: #ff0034;
}
</style>
